<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>韩征延123</title>
		<link href="main.css" type="text/css" rel="stylesheet" />
		<style>
			/* p {
				border: 1px solid gray;
			} */
			.welcome {
				border: 1px solid gray;
				width: 300px;
				height: 50px;
			}
			h2 {
				background-color: aqua;
			}

			input[type="radio"] {
				width: 20px;
				height: 20px;
			}
			div.static {
				position: static;
				border: 3px solid #73ad21;
			}
		</style>
	</head>
	<body>
		<p>-----区域标签-----</p>
		<div class="welcome">Hello World!</div>
		<p>-----标题标签-----</p>
		<h1 style="color: red">这是一级代码</h1>
		<h2>这是二级代码</h2>
		<h3>这是三级标题</h3>
		<h4>这是四级标题</h4>
		<h5>这是五级标题</h5>
		<h6>这是六级标题</h6>
		<p>-----超链接标签-----</p>
		<a href="https://www.baidu.com/" target="_blank">百度</a>
		<p>-----图片标签-----</p>
		<img
			src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657761720&t=909dadc95a615b3ff0624a1ad416eb4c"
			alt="美景"
		/>
		<p>-----表单标签-----</p>
		<form action="#">
			<!--隐藏框-->
			<input type="hidden" id="userId" name="userId" value="1" />
			<!--单行文本框-->
			<p>
				<label for="userName">用户名</label>
				<input type="text" id="userName" name="userName" value="hanzhengyan" required />
			</p>
			<!--密码框-->
			<p>
				<label for="password">密码</label>
				<input type="password" id="password" name="password" />
			</p>
			<!--单选框-->
			<p>
				<label for="sex">性别</label>
				<input type="radio" name="sex" value="male" checked />男
				<input type="radio" name="sex" value="female" />女
			</p>
			<!--复选框-->
			<p>
				<input type="checkbox" name="vehicle" value="Bike" checked />Bike
				<input type="checkbox" name="vehicle" value="Car" checked />Car
				<input type="checkbox" name="vehicle" value="Subway" />Subway
			</p>
			<!--下拉框-->
			<p>
				<select id="city" name="city">
					<option value="重庆">重庆</option>
					<option value="成都" selected>成都</option>
				</select>
			</p>
			<!--多行文本框-->
			<p>
				<textarea name="desc" id="desc" cols="20" rows="4" value="abc"></textarea>
			</p>
			<!--按钮-->
			<p>
				<input type="button" name="btn01" value="按钮" />
				<input type="reset" name="btn02" value="重置" />
				<input type="submit" name="btn03" value="提交" />
			</p>

			<p>
				<!--日期选择-->
				<input type="date" name="current" />
				<!--数值选择-->
				<input type="number" min="1" max="10" step="2" />
				<!--邮件选择-->
				<input type="email" />
			</p>
		</form>
		<p>-----datalist标签-----</p>
		<p>
			<input list="d1" />
			<datalist id="d1">
				<option value="han">韩</option>
				<option value="zheng">征</option>
				<option value="yan">延</option>
			</datalist>
		</p>
		<p>-----表格标签-----</p>
		<table>
			<tr>
				<td>id</td>
				<td>name</td>
				<td>age</td>
			</tr>
			<tr>
				<td>1</td>
				<td>hanzhengyan</td>
				<td>21</td>
			</tr>
		</table>
		<p>-----列表标签-----</p>
		<ul type="circle">
			<li>这是标签1</li>
			<li>这是标签2</li>
			<li>这是标签3</li>
			<li>这是标签4</li>
		</ul>
		<ol start="1">
			<li>这是标签1</li>
			<li>这是标签2</li>
			<li>这是标签3</li>
			<li>这是标签4</li>
		</ol>
		<dl>
			<dt>一级标签1</dt>
			<dd>二级标签1</dd>
			<dd>二级标签2</dd>
		</dl>
		<p>-----视频标签-----</p>
		<video
			src="http://sp.720ku.net//upload/video/2018-06-23/c4ce1771-3901-442a-8c35-5b360993c292.mp4"
			width="600px"
			height="400px"
			controls="controls"
		></video>
		<p>-----特殊标签-----</p>
	</body>
</html>
